<template>
 <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>学生管理</el-breadcrumb-item>
  <el-breadcrumb-item>学生信息管理</el-breadcrumb-item>
  
</el-breadcrumb>

<el-card>
<div style="margin-top: 15px;">
 <el-row :gutter="30">
  <el-col :span="8">
  <el-input placeholder="请输入学生名称" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search" @click="SearchStudentList(1,5)"></el-button>
  </el-input>
  
  </el-col>
  
  
</el-row>
<!-- 放置学生用表格-->
<el-table
        :data="StudentList"
        border
        
        style="width: 100%"
      >
 <el-table-column type="index"> </el-table-column>
 <el-table-column prop="username" label="学生用户名" width="180">

        </el-table-column>
 <el-table-column prop="wxid" label="wxid" width="180">
        </el-table-column>
 <el-table-column prop="password" label="密码" width="180">
        </el-table-column>
  <el-table-column prop="phone" label="电话号码" width="180">
        </el-table-column>
        <el-table-column 
        :formatter="dateFormat"
        prop="lastlogintime" label="最后一次登入" width="180">
        </el-table-column>
        <el-table-column prop="examcount" label="总共做题数" width="180">
        </el-table-column>
        <el-table-column prop="errcount" label="总共错题数" width="180">
        </el-table-column>
        <el-table-column prop="islocked" label="用户状态" width="180">
        <template slot-scope="scope">
        <el-button  size="small"  type="primary" v-if="scope.row.islocked == 0">
        正常
        </el-button>
        <el-button  size="small"  type="danger" v-if="scope.row.islocked == 1">
        锁定
        </el-button>
        
         

        </template>
        
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="190">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
              
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              @click ="GetStudentListById(scope.row.id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
             
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteStudentList(scope.row.id)"
               
              ></el-button>
            </el-tooltip>
            
          </template>
        </el-table-column>

        



 </el-table>
 <!--分页功能-->
      <el-pagination

  @current-change="handleCurrentChange"
  
  :page-size="5"
  :pager-count="11"
  layout="prev, pager, next"
  :total="total">
</el-pagination>

</div>


</el-card>
  <el-dialog
      title="学生信息修改"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
    <!-- 声明表单-->
    <el-form
        :model="editForm"
        
        ref="editFormRef"
        label-width="70px"
    >
    <el-form-item label="用户名" >
          <el-input v-model="editForm.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" >
          <el-input v-model="editForm.password"></el-input>
    </el-form-item>

    <el-form-item label="手机号" >
          <el-input v-model="editForm.phone"></el-input>
    </el-form-item>

       <el-form-item label="状态" >
          <el-switch
  v-model="editForm.islocked"
  active-text="锁定"
  inactive-text="未锁定">
</el-switch>
    </el-form-item>

    </el-form>
    <!--底部区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="UpdateList">确 定</el-button>
      </span>



    </el-dialog>
 </div>
</template>

<script>
//对外暴露接口
 export default {
name:'StudentList', 
   data () {
     return {
         input3:"",
         total:0,
         StudentList:[],
         editDialogVisible:false,
         editForm:{},

     }
   },
   components: {

   },
   mounted() {
        this.GetStudentListByPage(1,5)
   },
   methods: {
       SearchStudentList(pagenum,count){
           this.GetStudentListByPage(pagenum,count,this.input3)



       },
       GetStudentListByPage(pagenum,count,stuname){

           let that = this;
           let url = "api/GetStudentListByPage";
           let data = {
            pagenum:pagenum,
            count:count,
            stuname:this.input3
        
      };
       this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
            that.total = data.total
            that.StudentList = data.records
          
        } else {
          that.$message.error(message);
        }
      });


       },
       handleCurrentChange(val){
           this.GetStudentListByPage(val,5)

       },
       dateFormat(row, column) {
      let date = row[column.property];

      if (date === undefined) {
        return row[column.property];
      }
      let datetime = new Date(date).toLocaleDateString();

      return datetime;
    },
    GetStudentListById(id){
         let that = this;
         let url = "api/GetStudentListById";
         let data = {
           id: id,
        
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        let data = Response.data.data
        if ((code == 200)) {
            that.editForm = data
            that.editDialogVisible = true
            
          
        } else {
          that.$message.error(message);
        }
      });
    },

    editDialogClosed(){
        this.editDialogVisible = false
    },
    UpdateList(){
        //把editform的锁定字段进行转义
        
        if(this.editForm.islocked == true){
               this.editForm.islocked =1
        }
        else{
            this.editForm.islocked = 0
        }
        this.editForm.lastlogintime=null
        let that = this;
        let url = "/api/EditStudentListById";
        let data = {
            studentlist:this.editForm, 
        }
        let jsondata = encodeURI(JSON.stringify(data),"utf-8");
        this.$axios.post(url,jsondata).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         
          that.$message.success(message);
          that.editDialogClosed()
        } else {
          that.$message.error(message);
        }
        
      });

    },
    deleteStudentList(id){
        let that = this;
         let url = "api/DelStudentListById"
         let data = {
             id:id
         }
          this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.GetStudentListByPage(1,5);
         
        } else {
          that.$message.error(message);
        }
      });

    }
       
   },
 }
</script>

<style scoped>

 
</style>
